解析DJA年度最佳数据可视化奖《汉密尔顿算法》｜专题

6月22日，全球数据新闻奖（DJA）在维也纳颁布，今年的年度最佳数据可视化奖颁给了《华尔街日报》，因为该报通过分析热门音乐剧《汉密尔顿》的押韵结构，开发了一种捕捉歌词复杂程度的算法并以可视化方式做了完美呈现。

评选委员会评价称：“这是一个堪称伟大的数据可视化作品，它以一种看似简单的方式讲述了一个复杂的故事。使用了由《华尔街日报》的图形团队开发的一种算法，该作品对百老汇轰动一时的音乐剧《汉密尔顿》复杂押韵结构进行了识别和可视化处理。这一可视化方法完全以一种原始的方式帮助读者们清楚看到，是什么使得汉密尔顿的歌词如此强大和令人难忘。这一作品完全是原创的，非常惊人。”

如此惊人的作品是如何创作的呢？今天RUC新闻坊的小编通过编译”The Hamilton Algorithm”，为大家清晰呈现该作品的创作过程。

合作是《华尔街日报》企业视觉组工作的秘密武器。该组近期的项目分解了热门音乐剧《汉密尔顿》（《汉密尔顿》，这部以美国第一任财政部长的生平经历改编的音乐剧席卷了全美：八项纽约剧评人奖、十一项托尼奖、格莱美最佳音乐剧专辑奖毫无悬念地被剧组收入囊中。——编者注）的押韵结构，设计人员、推广人员、数据记者共同协作开发了一个新的数据可视化类型，用于捕捉押韵词句复杂程度。从最初的想法到推广宣传，整个项目大约花了两个月的时间。项目组挖掘了早期的模拟模型，视频和屏幕截图。以下阐述他们是如何展开这个项目的。

点子

在结合了我们共同的爱好《汉密尔顿》后，我们的数据记者Joel Eastwood和推广员Erik Hinton为团队设定了一个初步的创意。我们能从分析音乐剧《汉密尔顿》的节奏类型中得到什么呢？我们能否展现音乐剧的多重影响力？于是，我们写了一个粗略的Python程序，它可以匹配类似的语音音节，并在一系列幻灯片中模拟结果。

我们的第一稿中可视化的基本要素为：一个抽象的水平图，颜色编码，注释歌词和以此显示的韵律结构。剧本的基本结构也在初稿中呈现：介绍乐曲第一节的复杂性并将《汉密尔顿》和一些有影响力的说唱歌曲及音乐剧进行比较。

Erik继续加深了算法的深度和复杂性并添加了一个命令行可视化器。该算法通过将每个单词分解成音节并将它们转换成语音来实现。例如，将英文“汉密尔顿”Ha-mil-ton的三个音节拆分成“HH-AE”，“M-AH-L”和“TON”的声音音素。然后再根据与乐曲中所有其他声音的着重音、接近度、元音和辅音的相似性对这三个音素进行评分。得分最高的是韵律，这些音节被归进对应的族群。

最初，我们用Python编写韵律算法并通过终端进行运行。这样就可以快速测试，并根据需要修改它。后来收到了很多反馈意见后，我们发现这是可视化一个有趣的部分而且之前我们也从未在其他领域看到过这种应用。这个过程激发了我们在JavaScript里重新创建它，这样用户就可以键入自己的歌词并创建可视化。在做了大量的工作和额外的设计后，我们最终开发出一个运行稳定可靠的触发器，同时也希望它可以成为项目中更强大和持久的部分。

设计

为了构建数据可视化，我们开始不断产生使用Photoshop，Illustrator和After Effects的想法。我们希望这个项目能更成熟，是一种让人惊叹着迷的可视化；同时也希望它的呈现是一种与动画视频对立的互动式存在。这就意味要考虑如何让用户能运用韵律进行重播和实验。设计师/开发人员Ana Becker用After Effects将动画引入可视化。这又迫使我们思索变化时机和变动方式如何把可视化与单词结合起来。

在向团队中的其他成员展示了这些可视化模型后，他们的反馈缩小了我们的研究方法范围。我们发现人们对图中颜色和点的含义感到困惑，因为它们单独呈现，并未和文本紧密相连，所以我们集中用视觉隐喻来解决这个差距。一种设计是模仿五线谱，帮助用户了解点的位置和韵律的连接，被标记的y轴将韵律族群与他们的主音结合起来。但是这个设计又引出了另一个问题：人们对五线谱的理解太肤浅。可视化呈现的不是关于音乐或节奏; 而是关于歌词和韵律。

五线谱设计的循环性试图在韵律族群间建立更强的联系，用x轴规则来连接点与其他类似的视觉风格。在这点上，我们为包括韵律音节的每个音节绘图。

代码

我们与五线谱的多样化版本非常贴近，实际上与第一次演示文稿中的可视化类似，我们尽可能保持简化的状态。

重复过程中的几个关键特征：

将某些单词添加到可视化中（例如上面的“总体”和“矿物”注释）

y轴声音有助于沟通每个韵律族群的核心语音结构

我们开始对项目进行编码并创建了一个工作草案，音乐与可视化可以一起播放。由此，我们意识到音频剪辑开辟了一条新的道路：时间起到至关重要的作用。在早期的静态模拟中，所有的单词无法与可视化一起出现，因为我们无法将它们全部融入到阅读器中。在浏览器中，音节可以伴随着音乐的演奏逐一动态化，与卡拉OK风格类似。后来，我们终于可以用一种简明的方式正确地将可视化与文字相结合。

早期版本可以并排可视化并使用圆圈来表示韵律音节，这似乎是可以适应不同大小屏幕的最灵活的单位（可以轻松调整大小的尺寸）。我们还在描述性文本中尝试将其中的歌词和词语设置成粗体并进行颜色编码，以此加强文字和圆圈之间的联系。

由于想获得更多的反馈，团队的一些成员分别为每个韵律设计了一个钻石形状来代替圆圈。这样，韵律对之间的联系似乎更加清晰了，因为重要的是读者能够追踪这些形状来了解它们之间的关系。我们用钻石形状来重构代码。

到这一步，新手也可以看懂这个可视化了，但我们仍需强调故事中描述的具体韵律类型。仍需一些最终触点：我们添加了下面的注释，调整了不透明度使无关音节淡出，并在说明文本中添加了颜色编码单词。

润色

提升可视化的同时我们也花时间来打磨制作启动画面。我们既想让标题与《汉密尔顿》的开篇章节微妙呼应，即作为给音乐剧铁杆粉的一个小提示，又使标题本身富于韵律。我们的目标是可以从一开始就讨论可视化的各个方面，并强调韵律结构而不仅仅是舞台剧本身。从最早的版本开始，我们设计了一种押韵的大字体来介绍该项目。同时我们还尝试将可视化文件加到启动页面，这样可以使其动画化。但后来发现太混乱，没有必要。简单的图像足够凸显标题的含义。

最终结果如上图所示。多次修改了标题并加强了故事的韵律和框架。设计师Jessia Ma和Laura Holder又修饰了页面，并加入了一些如每个说唱歌手旁边的一个点画（hedcut点画法：用小点画法和阴影线画法制作图画，最初用来仿制报纸上的版画模式，印在证书或货币上 ——编者注）之类有趣的视觉元素。

收获

此项目经历了多次迭代，包括团队工作人员以及各部门经理和编辑的反馈。（我们得知新闻工作室的很多同事对《汉密尔顿》怀有深深的喜爱之情。）

这个项目教会我们的第一件事就是从一个简单的点子和一个清晰的故事开始。我们向近十几个不同的股东提供了关于这个项目流程的最初展示文案，以期每人都能对我们的想法感兴趣。我们的文案删繁就简，只集中讲述我们想要呈现的故事。由于明确的起点和简单的目标，大家很快就明白了项目的思路。但有时也会偏离目标，但最初的目标设定总会带我们回到正轨。

第二件事便是迭代，迭代，迭代。每次都会改进一份草稿。虽然这个过程有时可能漫长而乏味，但我们强烈地感觉到按照这些想法操作，在视觉上展示了最佳的可视化。我们只在早期的文案中保留了了几个关键的部分的点子并延续到最终版，这是因为每个为这个项目而付出的工作人员都愿根据实际情况随时改变策略，而不只依附于一个单一的想法。

欲知更多DJA奖项内容，请关注以下公号发表文章

本期编辑：张毓荣

您的支持是我们前进的动力

作品链接：

https://source.opennews.org/articles/hamilton-algorithm/?nsukey=u2UsuVcP6OJxh9aWvK3vb09NgAX0hSa0y8VPJCEjP%2FAgJQsVt%2BPwe4WUox9lRVSEpBeKxLfiEYgf%2Bc6QyCAZosXUQZ45ardfvS%2FhYRg2mYb3CmTsOor53ZbDJgI%2Fd1SFt%2BTmRR2Xk4XFdl2xfntqMyxcrhOXj1vSbFfzE6RscN8KxX6FUFrGW%2FmOGEC9QvtP

或点击下方“阅读原文”可阅读本文编译原稿。